$(function () {
//左侧折线图
    function fangwenOption(data) {
        return {
            tooltip : {
                trigger: 'axis',
                showDelay : 0,
                axisPointer:{
                    show: true,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1,
                        color:data.color
                    }
                }
            },
            calculable: true,
            padding:15,
            grid:{
                top:40,
                left:40,
                bottom:30
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.wholemonth,
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97',
                            type:'dashed'
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:'#4d6b97'
                        }
                    },
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#4d6b97'
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min:0,
                    lineStyle:{
                        color:"#4d6b97"
                    },
                    splitNumber:3,
                    splitLine:{
                        show:false,
                        lineStyle:{
                            color:'#4d6b97',
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97',
                            type:'dashed'
                        }
                    },
                    axisLabel:{
                        formatter: '{value}',
                        margin:5,
                        textStyle:{
                            color:'#4d6b97'
                        }
                    },
                }
            ],
            series: [
                {
                    name: 'CPU使用',
                    type: 'line',
                    data: data.monthdata,
                    symbol: 'none',
                    itemStyle:{
                        normal:{
                            lineStyle:{color:data.color}
                        }
                    },
                }
            ]
        };
    }
    function getsysdata(option) {
        var result='';
        $.ajax({
            type : "get",
            url : option.url,///api/system-cpu-utilization-ratio
            dataType:"json",
            async:false,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success : function(data) {
                result=data;
            }
        });
        return result;
    }
    function turnArray(obj,opt) {
        var returnArr = [[],[]],time=[];
        if(opt === 'cpu'){
            for(var i in obj){
                time = obj[i].dateTime.split(' ');
                returnArr[1].push(obj[i].cpuUse);
                returnArr[0].push(time[1]);
            }
        }else if(opt === 'mem'){
            for(var i in obj){
                time = obj[i].dateTime.split(' ');
                returnArr[1].push(obj[i].memUtilRatio);
                returnArr[0].push(time[1]);
            }
        }else{

        }

        return returnArr;
    }
    var apicpu = getsysdata({url:'/api/system-cpu-utilization-ratio'}),
        apimem = getsysdata({url:'/api/system-mem-utilization-ratio'});

    var getapicpudata = turnArray(apicpu,'cpu'),
        getapimemdata = turnArray(apimem,'mem');
    console.log(getapimemdata);


    var wholemonth=[],
        monthdata=[];
    for(var i=1;i<31;i++){
        wholemonth.push(i);
        monthdata.push((Math.ceil(Math.random()*6))*i)
    }
    var usecpu = echarts.init(document.getElementById('usecpu')),
        useneicun = echarts.init(document.getElementById('useneicun')),
        usecunchu = echarts.init(document.getElementById('usecunchu'));
    var usecpudata = {wholemonth:getapicpudata[0], monthdata:getapicpudata[1],color:'#6f9eff'},
        useneicundata = {wholemonth:getapimemdata[0], monthdata:getapimemdata[1],color:'#d56666'},
        usecunchudata = {wholemonth:wholemonth, monthdata:monthdata,color:'#1fc3ba'};
    usecpu.setOption(fangwenOption(usecpudata));
    useneicun.setOption(fangwenOption(useneicundata));
    usecunchu.setOption(fangwenOption(usecunchudata));

//中间折线图
    var twodayoption = {
        calculable : true,

        tooltip : {
            trigger: 'axis'
        },
        legend: {
            orient:'vertical',
            x:'right',
            padding:[10,30,10,10],
            data:[{name:'今日访问量', icon:'circle'},
                {name:'昨日访问量', icon:'circle'}],
            textStyle:{
                color:'#ffffff',
            }
        },
        color:['#9372e7','#6f9eff'], //改变标注图标的颜色
        grid:{
            top:40,
            bottom:10
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                axisLine:{
                    lineStyle:{
                        color:'#4d6b97'
                    }
                },
                axisLabel:{
                    textStyle:{
                        color:'#4d6b97'
                    }
                },
                splitLine:{
                    show:false,
                    lineStyle:{
                        color:'#4d6b97'
                    }
                }
            }
        ],
        yAxis : [
            {
                lineStyle:{
                    color:"#4d6b97"
                },
               /* splitNumber:2,*/
                splitLine:{
                    show:false,
                    lineStyle:{
                        color:'#4d6b97'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#4d6b97'
                    }
                },
                axisLabel:{
                    formatter: '{value}',
                    textStyle:{
                        color:'#4d6b97'
                    }
                }
            }
        ],
        series : [
            {
                name:'今日访问量',
                type:'line',
                data:[601, 911, 815, 803, 1802, 1603, 1340, 1202, 903, 1040, 1202, 903,],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'}
                    ],
                   /* itemStyle:{
                        normal:{
                            color:'#9372e7', //改变标注颜色
                            borderColor:'#9372e7'
                        }
                    },*/
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ],
                    itemStyle:{
                        normal:{
                            lineStyle:{color:'#9372e7'}
                        }
                    },

                },
                itemStyle:{
                    normal:{
                        lineStyle:{color:'#9372e7'}
                    }
                },

            },
            {
                name:'昨日访问量',
                type:'line',
                data:[300, 340, 402, 903, 1001, 911, 815, 1003, 1002, 940, 1212, 803,],
                symbol:'none',
                itemStyle:{
                    normal:{
                        lineStyle:{color:'#6f9eff'}
                    }
                },
            }
        ]
    };
    var twodayecharts = echarts.init(document.getElementById('twodayecharts'))
    twodayecharts.setOption(twodayoption);
//中间访问功能图左一
    var placeHolderStyle = {
        normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
        },
        emphasis : {
            color: 'rgba(0,0,0,0)'
        }
    };
    var phoneoption = {
        tooltip : {
            show: true,
            formatter: "{a} {b} : {c} ",
            padding:1
        },
        grid:{
            top:30,
            left:0
        },
        legend: {
            orient : 'vertical',
            x:document.getElementById('markphone').offsetWidth * 11 / 20,
            y:80,
            itemGap:4,
            padding:0,
            data:['IOS','Android','其他'],
            textStyle:{
                color:"#fff",
                fontSize:10
            }
        },
        series : [
            {
                name:' ',
                type:'pie',
                clockWise:false,
                radius : [50, 70],
                itemStyle : {
                    normal: {
                        color:"#1d79ff",
                        label: {show:false},
                        labelLine: {show:false},
                    }
                },
                data:[
                    {
                        value:60,
                        name:'IOS'
                    },
                    {
                        value:40,
                        name:'invisible',
                        itemStyle : placeHolderStyle
                    }
                ]
            },
            {
                name:' ',
                type:'pie',
                clockWise:false,
                radius : [30, 50],
                itemStyle : {
                    normal: {
                        color:"#1fc4ba",
                        label: {show:false},
                        labelLine: {show:false},
                    }
                },
                data:[
                    {
                        value:30,
                        name:'Android',
                    },
                    {
                        value:60,
                        name:'invisible',
                        itemStyle : placeHolderStyle
                    }
                ]
            },
            {
                name:' ',
                type:'pie',
                clockWise:false,
                radius : [10, 30],
                itemStyle : {
                    normal: {
                        color:"#a37bdc",
                        label: {show:false},
                        labelLine: {show:false},
                    }
                },
                data:[
                    {
                        value:10,
                        name:'其他'
                    },
                    {
                        value:90,
                        name:'invisible',
                        itemStyle : placeHolderStyle
                    }
                ]
            }
        ]
    };
    var markphone = echarts.init(document.getElementById('markphone'))
    markphone.setOption(phoneoption);
/*中间雷达图*/
    var broweroption = {
       /* grid:{
            top:30,
            left:50
        },*/
        calculable : true,
        polar : [
            {
                indicator : [
                    {text : 'IE7-', max  : 100},
                    {text : 'IE8', max  : 100},
                    {text : 'IE9+', max  : 100},
                    {text : 'Chrome', max  : 100},
                    {text : 'Firefox', max  : 100},
                    {text : 'Safari', max  : 100}
                ],
                radius : 65,
                splitArea:{
                    show:false,
                    areaStyle : {
                        color: ["#ff1"]  // 图表背景网格的颜色
                    }
                }
            }
        ],
        series : [
            {
                name: '浏览器',
                type: 'radar',
                itemStyle: {
                    normal: {
                        color:'#1d79ff',
                        areaStyle: {
                            type: 'default',
                        }
                    }
                },
                center:['55%','50%'],
                symbol:'none',
                data : [
                    {
                        value : [60, 60, 93, 94,93, 60],
                        name : '比例'
                    }
                ]
            }
        ]
    };
    var markbrower = echarts.init(document.getElementById('markbrower'))
    markbrower.setOption(broweroption);
//中间饼图
    var sysoption = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : ({c}%)"
        },
        legend: {
            type:'scroll',
            orient : 'vertical',
            x : 'right',
            padding:2,
            itemWidth:16,
            itemHeight:13,
            itemGap:5,
            textStyle:{
                fontSize:9,
                color:'#fff',
            },
            data:[
                {name:'Windows',icon:'diamond'},
                {name:'MacOS',icon:'diamond'},
                {name:'Linux',icon:'diamond'},
                {name:'Unix',icon:'diamond'},
                {name:'其他',icon:'diamond'}
                ]
        },
        color:['#1d79ff', '#1fc4ba', '#a37bdc', '#adde93', '#8392a5'],
        calculable : true,
        series : [
            {
                name: '功能',
                type: 'pie',
                radius: ['40%', '75%'],
               /* itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                fontSize: '12',
                                fontWeight: 'bold'
                            }
                        }
                    }
                },*/
                label:{
                    normal:{
                        position:'inner',
                        formatter:'{c}%'
                    }
                },

                data: [
                    {value: 30, name: 'Windows'},
                    {value: 25, name: 'Linux'},
                    {value: 20, name: 'MacOS'},
                    {value: 15, name: 'Unix'},
                    {value: 5, name: '其他'}
                ]

            }
        ]
    };
    var marksys = echarts.init(document.getElementById('marksys'))
    marksys.setOption(sysoption);

// 底部折线图
    var leaks = echarts.init(document.getElementById('leaks')),
        jifangdianliu = echarts.init(document.getElementById('jifangdianliu')),
        gongjiweixie = echarts.init(document.getElementById('gongjiweixie')),
        xitongfangwenqushi = echarts.init(document.getElementById('xitongfangwenqushi'));

    var getleaksq = getsysdata({url:'/api/leaks'})

    var wendudata={data:[2,7,5,3,5,4,1,2,1,2],perce:getleaksq,color:"#57ffff",bgcolor:'#1a6b97'},
        dianliudata={data:[5,4,5,1,2,3,3,2,5,1],perce:'5',color:"#a37bdc",bgcolor:'#31438c'},
        gongjidata={data:[4,6,8,5,2,5,8,5,8,7],perce:'10',color:"#47d98d",bgcolor:'#156075'},
        xitongfangwen={data:[2,7,2,5,4,5,6,3,5,2],perce:'24',color:"#2e4c78",bgcolor:'#999999'};

    var getleakdata = new GetOption(wendudata),
        getdianliudata = new GetOption(dianliudata),
        getgongjidata = new GetOption(gongjidata),
        getxitongfangwen = new GetOption(xitongfangwen)
    leaks.setOption(getleakdata);
    jifangdianliu.setOption(getdianliudata);
    gongjiweixie.setOption(getgongjidata);
    xitongfangwenqushi.setOption(getxitongfangwen);

    var mark_sys_response_data=[
        {name:'XXX功能',barwidth:'80%', barval:80,showdata:'23365M'},
        {name:'XXX功能',barwidth:'70%', barval:70,showdata:'5455M'},
        {name:'XXX功能',barwidth:'72%', barval:72,showdata:'5043M'},
        {name:'XXX功能',barwidth:'70%', barval:70,showdata:'4555M'},
        {name:'XXXX功能',barwidth:'62%', barval:62,showdata:'4435M'},
        {name:'XXX功能',barwidth:'61%', barval:61,showdata:'4005M'},
        {name:'XXXX功能',barwidth:'55%', barval:55,showdata:'2665M'},
        {name:'XXX功能',barwidth:'53%', barval:53,showdata:'2333M'},
        {name:'XXX功能',barwidth:'52%', barval:52,showdata:'2125M'},
        {name:'XXX功能',barwidth:'50%', barval:50,showdata:'1345M'},
        {name:'XXX功能',barwidth:'40%', barval:40,showdata:'1235M'},
        {name:'XXX功能',barwidth:'30%', barval:30,showdata:'985M'},
        {name:'XXX功能',barwidth:'28%', barval:28,showdata:'675M'},
        {name:'XXX功能',barwidth:'20%', barval:20,showdata:'565M'},
        {name:'XXX功能',barwidth:'15%', barval:15,showdata:'345M'},
        {name:'XXX功能',barwidth:'12%', barval:12,showdata:'235M'},
        {name:'XXX功能',barwidth:'10%', barval:10,showdata:'175M'},
        {name:'XXX功能',barwidth:'8%', barval:8,showdata:'65M'},
        {name:'XXX功能',barwidth:'4%', barval:4,showdata:'65M'},
        {name:'XXX功能',barwidth:'3%', barval:3,showdata:'55M'},
        {name:'XXX功能',barwidth:'2%', barval:2,showdata:'47M'},
        {name:'XXX功能',barwidth:'2%', barval:2,showdata:'35M'}
    ];
    function showlistdata(sourcelist) {
        var append_use_data='';
        for(var i in sourcelist){
            append_use_data += selflistbysource(sourcelist[i])
        }
        return append_use_data;
    }
    $(".mark_sys_response").append(showlistdata(mark_sys_response_data));

    window.addEventListener('resize',function () {
        leaks.resize();
        jifangdianliu.resize();
        gongjiweixie.resize();
        xitongfangwenqushi.resize();
        marksys.resize();
        markbrower.resize();
        markphone.resize();
        twodayecharts.resize();
        usecpu.resize();
        useneicun.resize();
        usecunchu.resize();
    })

})